<template>
  <van-overlay :show="orderConfirmationShow" @click="orderConfirmationShow = false">
    <div class="h-full w-full flex items-center justify-center">
      <div class="w-90% flex flex-col items-center gap-6 rounded-3 bg-#fff p-x-8 p-y-10 p-b-8" @click.stop>
        <img src="https://jwc-static.jdwxk.com/imgs/mall/order-confirmation.png" class="w-20" alt="">
        <div class="w-full flex flex-col gap-3">
          <div class="w-full flex rounded-2 bg-#F7F7F7">
            <img :src="fileBaseUrl + goodsData.pic" class="w-20 rounded-l-2" alt="">
            <div class="m-l-5 m-t-2 flex flex-col gap-2">
              <span>{{ goodsData.name }}</span>
              <span class="text-3 text-#999">x1</span>
            </div>
          </div>
          <div class="w-full flex justify-between rounded-2 bg-#F7F7F7 p-3">
            <span class="text-#999">消耗积分</span>
            <div class="flex items-center gap-1 text-#EA6740">
              <img src="https://jwc-static.jdwxk.com/imgs/mall/star2.png" class="w-5" alt="">
              <span class="font-600">{{ goodsData.score }}</span>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <Btn @click="handleBuy">
            确认兑换
          </Btn>
        </div>
      </div>
    </div>
  </van-overlay>
  <SuccessDialog v-model:show="successDialogShow" />
  <FailDialog v-model:show="failDialogShow" :data="failDialogData" />
</template>

<script lang="ts" setup>
import SuccessDialog from './SuccessDialog/index.vue'
import FailDialog from './FailDialog/index.vue'
import { failOptions } from './config'
import { buyGoods } from '@/api/mall'
import type { IGoodsData } from '@/api/mall/types'
import Btn from '@/components/Btn.vue'
import { useUserStoreWidthOut } from '@/store/modules/user'

interface Props {
  goodsData: IGoodsData
}

const props = withDefaults(defineProps<Props>(), {
  goodsData: () => ({}) as IGoodsData,
})

const emit = defineEmits<{
  getDetail: []
}>()
const orderConfirmationShow = defineModel('show', {
  default: false,
})
const userStore = useUserStoreWidthOut()
const fileBaseUrl = import.meta.env.VITE_GLOB_IMG_URL
const successDialogShow = ref(false)
const failDialogShow = ref(false)
const failDialogData = ref<{ title: string, content: string }>({
  title: '',
  content: '',
})
async function handleBuy() {
  const res = await buyGoods({
    goodsId: props.goodsData.id,
    num: 1,
    phone: userStore.getUserInfo.phone,
  })
  emit('getDetail')
  userStore.GetUserInfo()

  orderConfirmationShow.value = false

  switch (res.code) {
    case 200:
      successDialogShow.value = true
      break
    case 201:
      failDialogShow.value = true
      failDialogData.value = failOptions.inexistence
      break
    case 202:
      failDialogShow.value = true
      failDialogData.value = failOptions.scoreInsufficient
      break
    default:
      failDialogShow.value = true
      failDialogData.value = failOptions.insufficientStock
      break
  }
}
</script>

<style lang="less" scoped></style>
